<template>

  <el-aside :width="sideBarWith">
    <el-row>
      <div class="logo">
        <img class="pic-logo" src="~@/assets/logo.png" @click="changeMenu()">
      </div>
       <div v-show="!isCollapse" class="show-text">
           <span>贴心工具</span>
       </div>
    </el-row>

      <el-menu
        :unique-opened="true"
        :collapse="isCollapse"
        @open="handleOpen"
        @close="handleClose">

        <el-sub-menu v-for="(menuInfo, index) in routerMap" :key="index" :index="index.toString()">
          <template #title>
            <component
              :is="menuInfo.meta.icon"
              style="width: 16px; height: 16px; padding-right: 10px"
            ></component>
            <span> {{ menuInfo.meta.menuName }} </span>
          </template>
          <el-menu-item-group v-if="menuInfo.children && menuInfo.children.length > 0">
            <router-link v-for="(childMenuInfo, subIndex) in menuInfo.children" :key="subIndex"
                         :index="subIndex.toString()" :to="childMenuInfo.path">
              <el-menu-item :index="index.toString() + '-' + subIndex.toString()" teleported>
                <component
                  :is="childMenuInfo.meta.icon"
                  style="width: 16px; height: 16px; padding-right: 10px"
                ></component>
                <template #title>
                  {{ childMenuInfo.meta.menuName }}
                </template>
              </el-menu-item>
            </router-link>
          </el-menu-item-group>
        </el-sub-menu>
      </el-menu>

  </el-aside>

</template>

<script lang="ts" setup>
import {ref} from 'vue'
import routerMap from '@/router/routerMap';
import {Menu as IconMenu, Message, Setting, Tickets} from '@element-plus/icons-vue'

const isCollapse = ref(true)
const sideBarWith = ref('70px')
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const changeMenu = () => {
  if(isCollapse.value){
    isCollapse.value = false;
    sideBarWith.value = '180px'
    return
  }
  isCollapse.value = true;
  sideBarWith.value = '70px'
}

</script>

<style scoped>

.el-icon {
  width: 1em;
  margin-right: 12px;
  font-size: 18px;
}
.logo {
  border-bottom: 1px solid #e8e8e8;
}
.pic-logo {
  height: 32px;
//background: rgba(139, 137, 137, 0.2);
  margin: 10px;
}
a {
  text-decoration: none;
}

.show-text{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: large;
  text-align: center;
  color: blue;
}


</style>
